<template>
  <ul class="weather-list">
    <li v-for="item in WEATHER_CONFIG" :key="item.value" class="weather-list-item mr-[40px]">
      <img class="itemIcon" :src="`/ifp-web-static/image/all/bench/${item.value}.png`" />
      <div>
        <div>{{ item.label || weatherData[item.key] }}</div>
        <div>
          <span>{{ weatherData[item.value] || "-" }}</span>
          <sub class="sub ml-[4px]">{{ item.unit }}</sub>
        </div>
      </div>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { WEATHER_CONFIG } from "../../const";
defineProps(["weatherData"]);
</script>
<style lang="scss" scope>
.weather-list {
  display: flex;
}

.sub {
  bottom: 0;
}

.weather-list-item {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  max-width: 154px;
}

.itemIcon {
  height: 44px;
  margin-right: 12px;
}
</style>
